<template>
	<view class="box">
		<view class="img-logo text-center">
			<image src="../../static/login/home-logo.png" mode=""></image>
		</view>
		<view class="mlr-36" style="margin-top: 136rpx;">
			<view class="img text-center ptb-50">
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="flex-center radius-10 white"
					style="background: #4CBF00;">
					<!-- <image src="../../static/login/vx.png" mode=""></image> -->
					<view class="login-text"> 
						手机号快捷登录
					</view>
				</button>

				<button type="primary" v-if="canUseGetUserProfile" @tap="getUserProfile" class="flex-center radius-10 white"
					style="background: #4CBF00;">
					<!-- <image src="../../static/login/vx.png" mode=""></image> -->
					<!-- 			<view class="login-text">
						微信一键登录1
					</view> -->
				</button>
				<button type="primary" v-else open-type="getUserInfo" @getuserinfo="bindGetUserInfo"
					class="flex-center radius-10 white" style="background: #4CBF00;">
					<image src="../../static/login/vx.png" mode=""></image>
					<view class="login-text">
						微信一键登录2
					</view>
				</button>
			</view>
		</view>
		<u-modal v-model="show" :content="content">
			<button slot="confirm-button" type="default" class="authorize-btn submit-btn" open-type="getPhoneNumber"
				@getphonenumber="onGetPhoneNumber">确认</button>
		</u-modal>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				code: '',
				canUseGetUserProfile: false,
				show: false,
				content: '需要获取手机权限'
			}
		},
		onLoad() {
			that = this;
			if (uni.getUserProfile) {
				this.canUseGetUserProfile = true
			}
			const user = uni.getStorageSync('FF_USER_INFO');
			if (user.headImg && user.nickname) {
				if (!user.mobPhone) {
					this.show = true;
				}
			}
		},
		methods: {
			bindGetUserInfo: function(e) {
				if (e.detail.errMsg.indexOf("fail auth deny") > -1) {
					uni.showModal({
						title: '提示',
						content: '用户拒绝授权',
						showCancel: false,
						success(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '../home/home',
								})
							}
						}
					});
				} else {
					uni.login({
						success: function(res) {
							if (res.code) {
								that.code = res.code;
								that.LoginByMa(e.detail);
							}
						},
						fail: () => {
							uni.showToast({
								title: "微信登录授权失败",
								icon: "none"
							});
						}
					});
				}
			},
			LoginByMa(userInfo) {
				console.log('=userinfo', userInfo)
				this.$u.post('/weChat/maAuthUser', {
					code: this.code,
					encryptedData: userInfo.encryptedData,
					headImgUrl: userInfo.userInfo.avatarUrl,
					iv: userInfo.iv,
					nickname: userInfo.userInfo.nickName,
					openId: uni.getStorageSync('OPENID'),
					rawData: userInfo.rawData,
					sessionKey: uni.getStorageSync('SESSION_KEY'),
					signature: userInfo.signature
				}).then(data => {
					uni.setStorageSync('FF_USER_INFO', data.userManager);
					uni.setStorageSync('OPENID', data.userManager.maOppenid);
					if (data.userManager.mobPhone) {
						uni.navigateBack({
							delta: 1
						})
					} else {
						that.show = true;
					}
				});
				this.code = ''
			},
			//小程序授权api替换 getUserInfo 替换
			getUserProfile() {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (e) => {
						console.log(e);
						//业务逻辑
						uni.login({
							provider: 'weixin',
							success: (res) => {
								console.log('uniloginunilogin', res)
								//在这里调取后台登录接口
								that.code = res.code
								that.LoginByMa(e);
							},
							fail: (err) => {
								uni.showToast({
									title: "微信登录授权失败",
									icon: "none"
								});
							}
						})
					}
				})
			},
			getPhoneNumber(e) {
				// http://192.168.110.66:8080
				this.$u.post('/user/wechatLogin', {
					code: e.detail.code
				}).then(res => {
					if (res.success) {
						uni.setStorageSync('FF_USER_INFO', res.result);
						uni.setStorageSync('FF_TOKEN', res.result.token);
						uni.login({
							success: result => {
								this.$u.post('/user/openId', {
									code: result.code
								}).then(loginRes => {
									if (loginRes.success) {
										uni.navigateBack({
											delta: 1
										})
									}
								})
							}
						})
					}
				})
			},
			onGetPhoneNumber(e) {
				console.log(e);
				var that = this;
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					uni.login({
						success: function(res) {
							that.$u.post('/weChat/phoneRegister', {
								code: res.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								openId: uni.getStorageSync("OPENID"),
								headImgUrl: uni.getStorageSync("FF_USER_INFO").headImg,
								nickname: uni.getStorageSync("FF_USER_INFO").nickname
							}).then(data => {
								uni.setStorageSync('FF_USER_INFO', data.userManager);
								uni.setStorageSync('FF_TOKEN', data.token);
								uni.navigateBack({
									delta: 1
								})
							});
						},
						fail: () => {
							uni.showToast({
								title: "微信登录授权失败",
								icon: "none"
							});
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '用户拒绝授权',
						showCancel: false,
						success(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '../home/home',
								})
							}
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn {
		height: 96rpx !important;
	}

	.box {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.img-logo {
			margin-top: 240rpx;

			image {
				width: 320rpx;
				height: 106rpx;
			}
		}

		.img {
			position: relative;

			.button {
				width: 100%;
				position: absolute;
				opacity: 0;
			}

			image {
				width: 55rpx;
				height: 55rpx;
			}

			.login-text {
				font-size: 36upx;
				color: #FFFFFF;
			}
		}
	}

	.text-center {
		text-align: center;
	}

	.mlr-36 {
		margin: 0 36rpx;
	}

	.ptb-50 {
		padding: 50rpx 0;
	}

	.radius-10 {
		border-radius: 10rpx;
	}

	.white {
		color: #fff;
	}

	.authorize-btn {
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		background-color: #FFFFFF;
	}

	.authorize-btn::after {
		border: none;
	}

	.submit-btn {
		color: rgb(41, 121, 255);
	}
</style>